<template>
    <view class="container orderdetails">
        <uni-list>
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">今日进度 <text class="red">*</text></view>
                <view class="bodyc" slot="body">
                   <uni-easyinput type="textarea" v-model="content" placeholder="今日进度内容" /> 
                </view> 
            </uni-list-item>
            <uni-list-item direction ="row">
                <view class="titlelo" slot="header">现场照片</view>
                <view class="imgslistbox" slot="body">
                    <myupload v-if="showbbss" ref="files" :limit="limit" :images="imgs"></myupload>
                  
               <!--   <uni-file-picker limit="12"
                    ref="files"
                  mode="grid"
                  :image-styles="imagestyles"
                   :auto-upload="false"
                  title="最多选择6张图片"
                  @select="selimg"
                  @delete="deleteimg"
                  ></uni-file-picker> -->
              
                
                </view> 
            </uni-list-item>        
        </uni-list>
        <view class="btns">
            <!-- <view class="btn2" @click="showSign">签名</view> -->
            <view class="btn1" @click="submit()">确认提交</view>
        </view>
        <uni-popup ref="signbox">
            <div class="bigbox">
                <sign @signEnd="signEnd" @close="close"></sign>
            </div>
        </uni-popup>
    </view>
</template>

<script>
    import myupload from '@/components/myupload.vue'

    export default{
        name:"daylog",
        components:{
            myupload
        },
        data(){
            return{
               id:'',
               content:'',
               limit:12,
               imgs:[],
               showProp: false,
               signedImg: '',
               imagestyles:{
                   "height": 80,	// 边框高度
                    "width": 80,	// 边框宽度
                   	"border":{ // 如果为 Boolean 值，可以控制边框显示与否
                   		"color":"#eee",		// 边框颜色
                   		"width":"1px",		// 边框宽度
                   		"style":"solid", 	// 边框样式
                   	}
               },
               did:'',
               showbbss:false
            }
        },
    
        onLoad(option){
            this.id = option.id
            if(option.did){
                this.did = option.did
            }else{
                this.showbbss = true
            }
        },
        onShow(){
            this.getonedate()
        },
        methods:{
            getonedate(){
                this.$api.get('project.daylog/getone?id='+this.id+'&did='+this.did).then(({data})=>{
                    if(data){
                        this.content = data.content
                        this.imgs = data.imgs
                        
                    }
                     this.showbbss  = true
                })
            },
            selimg(e){
               console.log('sel',e) 
               this.imgs = this.imgs.concat(e.tempFilePaths)
            },
            deleteimg(e){
                var tempFilePath = e.tempFilePath
                
                for (let i = 0, len = this.imgs.length; i < len; i++) {
                    if(this.imgs[i] == tempFilePath){
                        this.imgs.splice(i,1)
                    }
                }
                console.log('del',this.imgs)
            },
            uploadthumg(){
                var _this =  this
                
            },
            submit(){
              
                if(!this.content){
                    this.$error("请输入进度内容")
                    return false;
                }
             
                uni.showLoading({
                    title:'上传中...',
                    mask:true
                })
                
                var imgs = this.$refs.files.contents
                this.$api.post(`project.daylog/submit2`,{
                    oid:this.id,
                    content:this.content,
                    did:this.did,
                    imgs:imgs
                }).then(()=>{
                    uni.$emit('daylog',{
                        data:1
                    })
                    uni.navigateBack({data:1})
                })
               
               
            },
            close(){
            
                this.$refs.signbox.close()
            },
            signEnd(signImg){
               
                
            	this.thumb = signImg.base64Img;

                this.$refs.signbox.close()
            },
            showSign(){
            	
                this.$refs.signbox.open('top')
            },
            delimg(index){
                this.imgs.splice(index,1)
            }
        }
    }
</script>

<style lang="less" scoped>
    page{
        background-color: #fff;
        padding: 0 20rpx;
    }
    .titlelo{
        font-size: 26rpx;
        font-weight: bold;
        width: 150rpx;
        
    }
    .bodyc{
        width: 560rpx;
        display: flex;
        justify-content: end;
        font-size: 26rpx;
        align-items: center;
        .client_name{
            margin-right: 10rpx;
        }
        .inputc{
            text-align: right;
        }
        .tips{
            margin-left: 10rpx;
        }
    }
    
    .thumb{
        width: 180rpx;
    }
    .btns{
         width: 80%;
         margin: 0 auto;
         display: flex;
         justify-content: center;
         margin-top: 100rpx;
         align-items: center;
        .btn1{
            width: 80%;
            height: 60rpx;
            line-height: 60rpx;
            background-color:#007aff;
            color: #fff;
            text-align: center;
        }
        .btn2{
            width: 30%;
            height: 48rpx;
            line-height: 48rpx;
            border: 1px solid #909399;
            color: #909399;
            text-align: center;
        }
    }
    .bigbox{
        width: 100vw;
        height: 100vh;
    }
    .addthumg{
        width: 180rpx;
        height: 180rpx;
        border: 1px solid #909399;
        text-align: center;
        line-height:180rpx ;
        font-size: 88rpx;
        color: #909399;
    }
    .imgslistbox{
         width: 540rpx;
        .viewthumb{
            width: 180rpx;
            height: 180rpx;
            position: relative;
            float: left;
            margin: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .thumb{
                width: 180rpx;
                height: 180rpx;
            }
            .delicon{
                position: absolute;
                color: red;
                top: -10rpx;
                right: -10rpx;
            }
        }
    }
</style>